<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例 - 按钮（Button）插件方法</title>
	<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	
<h2>点击每个按钮查看方法效果</h2>
<h4>演示 .button('toggle') 方法</h4>
    <div id="myButtons1" class="bs-example">
        <button type="button" class="btn btn-primary">
            原始
        </button>
    </div>
    <div id="myButton2" class="bs-example">
        <button type="button" class="btn btn-primary" data-loading-text="loading...">
            原始
        </button>
    </div>
    <div id="myButton3" class="ba-example">
        <button type="button" class="btn btn-primary" 
        data-loading-text="loading...">
        原始
        </button>
    </div>
  <button  id="myButton4" type="button" class="btn btn-primary"
  data-complete-text="loading finished">
  请点击我

  </button>
    <script type="text/javascript">
            $(function(){
                $("#myButton1.btn").click(function(){
                    $(this).button('toggle');
                });
            });
            $(function(){
                $("#myButton2.btn").click(function(){
                    $(this).button('loading').delay(1000)
                    .queue(function(){

                    });
                });
            });
            $(function(){
                $("#myButton3.btn").click(function(){
                    $(this).button('loading').delay(1000).queue(function(){
                        $(this).button('reset');
                    });
                });
            });
            $(function(){
                $("#myButton4").click(function(){
                    $(this).button('loading').delay(1000).queue(function(){
                        $(this).button('complete');
                    });
                 });
            });
    </script>
</body>
</html>